// These mixins are intended to be used from:
//
//   * unsemantic-grid-base.scss
//   * unsemantic-grid-mobile.scss
//   * unsemantic-grid-desktop.scss
//   * _unsemantic-grid-responsive.scss
//   * etc.
//
// But could be used in your own styles, via class
// names of your choice. You don't *have* to be
// unsemantic. That's entirely up to you! :)

// If you don't need IE7 support, set a flag in the top-level scope.
//
//   $unsemantic-ie7-support: false
//
// If you do not declare that variable, the default setting is true.

// `Variables.
//----------------------------------------------------------------------------------------------------

$unsemantic-ie7-support: true !default;

$unsemantic-prefix-suffix-support: true !default;

$unsemantic-push-pull-support: true !default;

$container-max-width: 1200px !default;

$gutter-half: 10px !default;

$container-gutter: $gutter-half !default;

$lang-forward: left !default;

$lang-reverse: right !default;

// `IE7 Crap.
//----------------------------------------------------------------------------------------------------

//
// Keeping the vomit-worthy code in one spot.
// This is seriously bad, but IE7 is bad too.
//
// To prevent this from being generated in your CSS, set
// $unsemantic-ie7-support to `false` at a higher scope.
//

//
// Push
//
@mixin ie7-push($decimal) {
    @if $unsemantic-ie7-support {
        $str: "expression(Math.floor(#{$decimal} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px')";

        $val: unquote($str);

        /* <IE7> */
        *#{$lang-forward}: $val;
        /* </IE7> */
    }
}

//
// Pull
//
@mixin ie7-pull($decimal) {
    @if $unsemantic-ie7-support {
        $str: "expression(Math.floor(#{$decimal * -1} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px')";

        $val: unquote($str);

        /* <IE7> */
        *#{$lang-forward}: $val;
        /* </IE7> */
    }
}

//
// Width
//
@mixin ie7-width($decimal) {
    @if $unsemantic-ie7-support {
        $str: "expression(Math.floor(#{$decimal} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px')";

        $val: unquote($str);

        /* <IE7> */
        *width: $val;
        /* </IE7> */
    }
}

//
// Faux gutter
//
@mixin ie7-margin($margin) {
    $str: "expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === 'block' && this.currentStyle.width === 'auto') && '#{$margin}')";

    $val: unquote($str);

    @if $unsemantic-ie7-support {
        // [1] Remove padding, since IE7 doesn't
        //     support "box-sizing: border-box".

        /* <IE7> */
        *padding-left: 0;
        *padding-right: 0;
        /* </IE7> */

        //
        // [2] Fake what would normally be padding,
        //     for browsers that support box-sizing.

        & > * {
            /* <IE7> */
            *margin-left: $val;
            *margin-right: $val;
            /* </IE7> */
        }
    }
}

// `Creates scoped placeholders.
//----------------------------------------------------------------------------------------------------

@mixin unsemantic-grid-placeholders($_SCOPE: null) {
    $scope: "";

    // Set if it exists.
    @if $_SCOPE {
        $scope: #{$_SCOPE + "-"};
    }

    // ========================
    // `Clear floated elements.
    // ========================

    // http://sonspring.com/journal/clearing-floats

    %#{$scope}clear {
        clear: both;
        display: block;
        overflow: hidden;
        visibility: hidden;
        width: 0;
        height: 0;
    }

    // http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified

    %#{$scope}clearfix:before,
        %#{$scope}clearfix:after {
        content: ".";
        display: block;
        overflow: hidden;
        visibility: hidden;
        font-size: 0;
        line-height: 0;
        width: 0;
        height: 0;
    }

    %#{$scope}clearfix:after {
        clear: both;
    }

    @if $unsemantic-ie7-support {
        %#{$scope}clearfix {
            /* <IE7> */
            *zoom: 1;
            /* </IE7> */
        }
    }

    // ===========
    // `Container.
    // ===========

    %#{$scope}grid-container {
        @extend %#{$scope}clearfix;
        margin-left: auto;
        margin-right: auto;

        // Set if it exists.
        @if $container-max-width {
            max-width: $container-max-width;
        }

        // Set if it exists.
        @if $container-gutter {
            padding-left: $container-gutter;
            padding-right: $container-gutter;
        }
    }

    // ==============
    // `Grid columns.
    // ==============

    %#{$scope}grid-columns-all {
        @extend %#{$scope}clearfix;

        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        // Set if it exists.
        @if $gutter-half {
            padding-left: $gutter-half;
            padding-right: $gutter-half;
            @include ie7-margin($gutter-half);
        }
    }

    // Remove padding, if it's being used
    // as a parent for other grid columns.
    %#{$scope}grid-parent {
        padding-left: 0;
        padding-right: 0;
    }

    // Offset the left/right margin of an
    // element that contains grid units.
    %#{$scope}grid-offset {
        @extend %#{$scope}clearfix;
        clear: both;

        // Set if it exists.
        @if $gutter-half {
            margin-left: -1 * $gutter-half;
            margin-right: -1 * $gutter-half;
        }
    }

    // Allow column swapping?
    @if $unsemantic-push-pull-support {
        // Allows columns to be offset +/- left.
        %#{$scope}grid-columns-push-pull {
            position: relative;
        }
    }

    // ===============================
    // `Hide on desktop/tablet/mobile.
    // ===============================

    %#{$scope}hide {
        display: none !important;
    }

    // ==============
    // `Grid columns.
    // ==============

    // For 5 through 95 percent.
    @for $i from 1 through 19 {
        $num: $i * 5;
        $decimal: $num / 100;
        $percent: $num * 1%;

        %#{$scope}grid-#{$num} {
            float: $lang-forward;
            width: $percent;
            @include ie7-width($decimal);
        }

        // Allow empty columns?
        @if $unsemantic-prefix-suffix-support {
            // Prefix, to add extra columns before.
            %#{$scope}prefix-#{$num} {
                margin-#{$lang-forward}: $percent;
            }

            // Suffix, to add extra columns after.
            %#{$scope}suffix-#{$num} {
                margin-#{$lang-reverse}: $percent;
            }
        }

        // Allow column swapping?
        @if $unsemantic-push-pull-support {
            // Push columns forward.
            %#{$scope}push-#{$num} {
                #{$lang-forward}: $percent;
                @include ie7-push($decimal);
            }

            // Pull columns backward.
            %#{$scope}pull-#{$num} {
                #{$lang-forward}: $percent * -1;
                @include ie7-pull($decimal);
            }
        }
    }

    // For one-third and two-thirds.
    @for $i from 1 through 2 {
        $num: $i * 33;
        $one-third: 1 / 3;
        $decimal: $i * $one-third;
        $percent: ($num + $decimal) * 1%;

        // Percentage based widths.
        %#{$scope}grid-#{$num} {
            float: $lang-forward;
            width: $percent;
            @include ie7-width($decimal);
        }

        // Allow empty columns?
        @if $unsemantic-prefix-suffix-support {
            // Prefix, to add extra columns before.
            %#{$scope}prefix-#{$num} {
                margin-#{$lang-forward}: $percent;
            }

            // Suffix, to add extra columns after.
            %#{$scope}suffix-#{$num} {
                margin-#{$lang-reverse}: $percent;
            }
        }

        // Allow column swapping?
        @if $unsemantic-push-pull-support {
            // Push columns forward.
            %#{$scope}push-#{$num} {
                #{$lang-forward}: $percent;
                @include ie7-push($decimal);
            }

            // Pull columns backward.
            %#{$scope}pull-#{$num} {
                #{$lang-forward}: $percent * -1;
                @include ie7-pull($decimal);
            }
        }
    }

    // Full width, just line-break.
    %#{$scope}grid-100 {
        clear: both;
        width: 100%;
    }
}

// `Consume global placeholders. For: mobile, tablet, destkop, etc.
//----------------------------------------------------------------------------------------------------

@mixin unsemantic-grid-base($_LIST...) {
    // ===========
    // `Container.
    // ===========

    .grid-container {
        @extend %grid-container;
    }

    // ========================
    // `Clear floated elements.
    // ========================

    .clear {
        @extend %clear;
    }

    .clearfix {
        @extend %clearfix;
    }

    // =============================
    // `Parent and offset overrides.
    // =============================

    // Remove padding, if it's being used
    // as a parent for other grid columns.
    .grid-parent {
        @extend %grid-parent;
    }

    // Offset the left/right margin of an
    // element that contains grid units.
    .grid-offset {
        @extend %grid-offset;
    }

    // ==============
    // `Grid columns.
    // ==============

    @if type-of($_LIST) == arglist {
        @each $_SCOPE in $_LIST {
            $class: "";

            // Class prefix.
            @if $_SCOPE and $_SCOPE != desktop {
                $class: #{$_SCOPE + "-"};
            }

            // For 5 through 100 percent.
            @for $i from 1 through 20 {
                $num: $i * 5;

                .#{$class}grid-#{$num} {
                    @extend %grid-columns-all;
                }
            }

            // For one-third and two-thirds.
            @for $i from 1 through 2 {
                $num: $i * 33;

                .#{$class}grid-#{$num} {
                    @extend %grid-columns-all;
                }
            }
        }
    }
}

// `Consume placeholders at breakpoint scope.
//----------------------------------------------------------------------------------------------------

@mixin unsemantic-grid-scoped($_SCOPE: null) {
    $scope: "";
    $class: "";

    // Set if it exists.
    @if $_SCOPE {
        $scope: #{$_SCOPE + "-"};
    }

    // Class prefix.
    @if $_SCOPE and $_SCOPE != desktop {
        $class: #{$_SCOPE + "-"};
    }

    // ================
    // `Hide on mobile.
    // ================

    .hide-on-#{$_SCOPE} {
        @extend %#{$scope}hide;
    }

    // ==============
    // `Grid columns.
    // ==============

    // Full width, just line-break.
    .#{$class}grid-100 {
        @extend %#{$scope}grid-100;
    }

    // For 5 through 95 percent.
    @for $i from 1 through 19 {
        $num: $i * 5;

        // Percentage based widths.
        .#{$class}grid-#{$num} {
            @extend %#{$scope}grid-#{$num};
        }

        // Allow empty columns?
        @if $unsemantic-prefix-suffix-support {
            // Prefix, to add extra columns before.
            .#{$class}prefix-#{$num} {
                @extend %#{$scope}prefix-#{$num};
            }

            // Suffix, to add extra columns after.
            .#{$class}suffix-#{$num} {
                @extend %#{$scope}suffix-#{$num};
            }
        }
    }

    // For one-third and two-thirds.
    @for $i from 1 through 2 {
        $num: $i * 33;

        // Percentage based widths.
        .#{$class}grid-#{$num} {
            @extend %#{$scope}grid-#{$num};
        }

        // Allow empty columns?
        @if $unsemantic-prefix-suffix-support {
            // Prefix, to add extra columns before.
            .#{$class}prefix-#{$num} {
                @extend %#{$scope}prefix-#{$num};
            }

            // Suffix, to add extra columns after.
            .#{$class}suffix-#{$num} {
                @extend %#{$scope}suffix-#{$num};
            }
        }
    }

    // ==============================================================
    // `Push & Pull, to rearrange column order (for potential "SEO").
    // ==============================================================

    // Allow column swapping?
    @if $unsemantic-push-pull-support {
        // For 5 through 95 percent.
        @for $i from 1 through 19 {
            $num: $i * 5;

            // Push columns forward.
            .#{$class}push-#{$num} {
                @extend %#{$scope}push-#{$num};
                @extend %#{$scope}grid-columns-push-pull;
            }

            // Pull columns backward.
            .#{$class}pull-#{$num} {
                @extend %#{$scope}pull-#{$num};
                @extend %#{$scope}grid-columns-push-pull;
            }
        }

        // For one-third and two-thirds.
        @for $i from 1 through 2 {
            $num: $i * 33;

            // Push columns forward.
            .#{$class}push-#{$num} {
                @extend %#{$scope}push-#{$num};
                @extend %#{$scope}grid-columns-push-pull;
            }

            // Pull columns backward.
            .#{$class}pull-#{$num} {
                @extend %#{$scope}pull-#{$num};
                @extend %#{$scope}grid-columns-push-pull;
            }
        }
    }
}